// pages/project2/components/copper/index.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    'imageUrl': {
      type: String
    }
  },

  /**
   * 组件的初始数据
   */
  data: {
    copperSync: false,
    imageWidth: 0,
    imageHeight: 0,

    rpxToPx: '',
    copperWidth: 0,
    copperHeight: 0,
    copperTop: 0,
    copperLeft: 0,
    copperStart: {
      top: 0,
      left: 0,
      startTop: 0,
      startLeft: 0,
      width: 0,
      height: 0
    },
  },

  attached() {
    const info = wx.getSystemInfoSync();
    this.data.rpxToPx = info.windowWidth / 750
    console.log(this.data.rpxToPx);
  },

  /**
   * 组件的方法列表
   */
  methods: {
    imgReset() {
      this.setData({
        copperSync: true
      })
      wx.getImageInfo({
        src: this.data.imageUrl,
        success: (res) => {
          const WHroate = (res.width / res.height).toFixed(2)
          if (WHroate >= 1) {
            this.setData({
              imageWidth: 700,
              imageHeight: 700 / WHroate,
              copperWidth: 700,
              copperHeight: 700 / WHroate
            })
          } else {
            this.setData({
              imageWidth: 700 / WHroate,
              imageHeight: 700,
              copperWidth: 700 / WHroate,
              copperHeight: 700
            })
          }
        }
      })
    },

    //裁剪移动开始
    copperStatr(e) {
      console.log(e);
      this.setData({
        ['copperStart.top']: e.touches[0].clientY / this.data.rpxToPx,
        ['copperStart.left']: e.touches[0].clientX / this.data.rpxToPx,
        ['copperStart.startTop']: this.data.copperTop,
        ['copperStart.startLeft']: this.data.copperLeft,
        ['copperStart.width']: this.data.copperWidth,
        ['copperStart.height']: this.data.copperHeight,
      })
      console.log(this.data.copperStart.top);
      console.log(this.data.copperStart.width);
    },

    // 裁剪框移动事件
    copperMove(e) {
      console.log(e.currentTarget.dataset.type);
      const skewTop = e.touches[0].clientY / this.data.rpxToPx - this.data.copperStart.top
      const skewLeft = e.touches[0].clientX / this.data.rpxToPx - this.data.copperStart.left
      switch (e.currentTarget.dataset.type) {
        // 整体移动
        case 'copper':
          if (this.data.copperStart.startTop + skewTop > 0 && this.data.copperStart.startTop + skewTop < this.data.imageHeight - this.data.copperStart.height) {
            this.setData({
              copperTop: this.data.copperStart.startTop + skewTop,
            })
          }
          if (this.data.copperStart.startLeft + skewLeft > 0 && this.data.copperStart.startLeft + skewLeft < this.data.imageWidth - this.data.copperStart.width) {
            this.setData({
              copperLeft: this.data.copperStart.startLeft + skewLeft,
            })
          }

          break;
        //左上
        case 'topLeft':
          // 处理宽度和置左
          if (this.data.copperStart.width - skewLeft > 200 && this.data.copperStart.width - skewLeft < this.data.copperStart.width + this.data.copperStart.startLeft) {
            this.setData({
              copperLeft: this.data.copperStart.startLeft + skewLeft,
              copperWidth: this.data.copperStart.width - skewLeft,
            })
          }
          // 处理高度和置顶
          if (this.data.copperStart.height - skewTop > 200 && this.data.copperStart.height - skewTop < this.data.copperStart.height + this.data.copperStart.startTop) {
            this.setData({
              copperTop: this.data.copperStart.startTop + skewTop,
              copperHeight: this.data.copperStart.height - skewTop,
            })
          }
          break;
        // 中上
        case 'topCenter':
          // 处理高度和置顶
          if (this.data.copperStart.height - skewTop > 200 && this.data.copperStart.height - skewTop < this.data.copperStart.height + this.data.copperStart.startTop) {
            this.setData({
              copperTop: this.data.copperStart.startTop + skewTop,
              copperHeight: this.data.copperStart.height - skewTop,
            })
          }
          break;
        // 右上
        case 'topRight':
          // 处理宽度和置左
          if (this.data.copperStart.width + skewLeft > 200 && this.data.copperStart.width + skewLeft < this.data.imageWidth - this.data.copperStart.startLeft) {
            this.setData({
              copperWidth: this.data.copperStart.width + skewLeft,
            })
          }
          // 处理高度和置顶
          if (this.data.copperStart.height - skewTop > 200 && this.data.copperStart.height - skewTop < this.data.copperStart.height + this.data.copperStart.startTop) {
            this.setData({
              copperTop: this.data.copperStart.startTop + skewTop,
              copperHeight: this.data.copperStart.height - skewTop,
            })
          }
          break;
        // 中左
        case 'centerLeft':
          // 处理宽度和置左
          if (this.data.copperStart.width - skewLeft > 200 && this.data.copperStart.width - skewLeft < this.data.copperStart.width + this.data.copperStart.startLeft) {
            this.setData({
              copperLeft: this.data.copperStart.startLeft + skewLeft,
              copperWidth: this.data.copperStart.width - skewLeft,
            })
          }
          break;
        // 中右
        case 'centerRight':
          // 处理宽度和置左
          if (this.data.copperStart.width + skewLeft > 200 && this.data.copperStart.width + skewLeft < this.data.imageWidth - this.data.copperStart.startLeft) {
            this.setData({
              copperWidth: this.data.copperStart.width + skewLeft,
            })
          }
          break;
        // 下左
        case 'bottomLeft':
          // 处理宽度和置左
          if (this.data.copperStart.width - skewLeft > 200 && this.data.copperStart.width - skewLeft < this.data.copperStart.width + this.data.copperStart.startLeft) {
            this.setData({
              copperLeft: this.data.copperStart.startLeft + skewLeft,
              copperWidth: this.data.copperStart.width - skewLeft,
            })
          }

          // 处理高度和置顶
          if (this.data.copperStart.height + skewTop > 200 && this.data.copperStart.height + skewTop < this.data.imageHeight - this.data.copperStart.startTop) {
            this.setData({
              copperHeight: this.data.copperStart.height + skewTop,
            })
          }
          break;
        // 下中
        case 'bottomCenter':
          // 处理高度和置顶
          if (this.data.copperStart.height + skewTop > 200 && this.data.copperStart.height + skewTop < this.data.imageHeight - this.data.copperStart.startTop) {
            this.setData({
              copperHeight: this.data.copperStart.height + skewTop,
            })
          }
          break;
        //下右
        case 'bottomRight':
          // 处理宽度和置左
          if (this.data.copperStart.width + skewLeft > 200 && this.data.copperStart.width + skewLeft < this.data.imageWidth - this.data.copperStart.startLeft) {
            this.setData({
              copperWidth: this.data.copperStart.width + skewLeft,
            })
          }
          // 处理高度和置顶
          if (this.data.copperStart.height + skewTop > 200 && this.data.copperStart.height + skewTop < this.data.imageHeight - this.data.copperStart.startTop) {
            this.setData({
              copperHeight: this.data.copperStart.height + skewTop,
            })
          }
          break;
        default:
          break;
      }
    },

    //裁剪结束
    copperEnd(e) {
      switch (e.currentTarget.dataset.type) {
        case 'topLeft':
          console.log(e.touches);

          break;

        default:
          break;
      }
    },


  }
})